<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(专栏)"></head>
<body class="">
<div class="page">
	<div class="flex-fill">
		<!--响应式顶部菜单-->
		<div th:replace="public/topbar :: flexTopbar(1)"></div>
		<div class="my-3 my-md-5">
			<div class="container">
				<div class="row mb-3">
					<!--侧边菜单-->
					<div th:replace="public/sidebar :: sidebar"></div>
					<div class="col-lg-9">
						<!--顶部菜单-->
						<div th:replace="public/topbar :: topbar(1)"></div>
						<div class="row">
							<div class="col-sm-8 mb-sm-5" style="text-align: center;margin: 0 auto;">
								<div id="carousel-sample" class="carousel slide" data-ride="carousel">
									<ol class="carousel-indicators">
										<li data-target="#carousel-sample" data-slide-to="0"
											th:each="banner : ${columnVo.bannerList}"
											th:attr="data-slide-to=${bannerStat.index}">
										</li>
									</ol>
									<div class="carousel-inner" style="height: 300px">
										<a class="carousel-item"
											 th:each="banner : ${columnVo.bannerList}"
											 th:classappend="${bannerStat.first} ? 'active' : ''"
											 href="#"
										     th:onclick="'javascript:location.href= \'/column/' + ${banner.id} + '\''">
											<img class="d-block w-100" alt="" th:src="${banner.image}" data-holder-rendered="true" />
										</a>
									</div>
									<a class="carousel-control-prev" href="#carousel-sample" role="button" data-slide="prev">
										<span class="carousel-control-prev-icon" aria-hidden="true"></span>
										<span class="sr-only">Previous</span>
									</a>
									<a class="carousel-control-next" href="#carousel-sample" role="button" data-slide="next">
										<span class="carousel-control-next-icon" aria-hidden="true"></span>
										<span class="sr-only">Next</span>
									</a>
								</div>
							</div>
							<div class="col-xl-6 mb-4" th:each="column : ${columnVo.pageResult.list}">
								<div class="card">
									<img th:src="${column.image}" class="card-img-top" alt="Card top image" style="height: 200px; width: auto;cursor: pointer" title="查看详情" th:onclick="'javascript:location.href= \'/column/' + ${column.id} + '\''">
									<div class="card-body">
										<h3 class="card-title" th:text="${column.name}" style="cursor: pointer;"  th:onclick="'javascript:location.href= \'/column/' + ${column.id} + '\''">Card with title and image</h3>
										<p th:text="${column.summary}">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima
											neque pariatur perferendis sed suscipit velit vitae voluptatem.</p>
									</div>
								</div>
							</div>
							<div class="card-body" th:if="${columnVo.pageResult.totalPage > 0}">
                                <span>
                                    共<b class="text-red">&nbsp;[[${columnVo.pageResult.totalNum}]]&nbsp;</b>
                                    个专栏，共<b class="text-red">&nbsp;[[${columnVo.pageResult.totalPage}]]&nbsp;</b>
                                    页，当前第<b class="text-red">&nbsp;[[${columnVo.pageResult.page}]]&nbsp;</b>页</span>
								<ul class="pagination center float-right">
									<li class="page-item" th:classappend="${columnVo.pageResult.totalPage == 0 || columnVo.pageResult.page == 1} ? 'disabled' : ''">
										<a class="page-link" href="#" tabindex="-1" th:href="'/column?page=' + ${columnVo.pageResult.page - 1}">
											<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
												<path stroke="none" d="M0 0h24v24H0z"></path>
												<polyline points="15 6 9 12 15 18"></polyline>
											</svg>
										</a>
									</li>
									<li class="page-item" th:classappend="${columnVo.pageResult.totalPage == 0 || columnVo.pageResult.page == columnVo.pageResult.totalPage} ? 'disabled' : ''">
										<a class="page-link" href="#" th:href="'/column?page=' + ${columnVo.pageResult.page + 1}">
											<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
												 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
												 stroke-linecap="round" stroke-linejoin="round" class="icon">
												<polyline points="9 18 15 12 9 6"></polyline>
											</svg>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer class="footer">
		<div class="container">
			<div class="row align-items-center flex-row-reverse">
				<div class="col-auto ml-lg-auto">
					<div class="row align-items-center">
						<div class="col-auto">
							<ul class="list-inline list-inline-dots mb-0">
								<li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li>
								<li class="list-inline-item"><a href="./faq.html">FAQ</a></li>
							</ul>
						</div>
						<div class="col-auto">
							<a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source
								code</a>
						</div>
					</div>
				</div>
				<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
					Copyright © 2019 <a href="../../../static">Tabler</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a>
					All rights reserved.
				</div>
			</div>
		</div>
	</footer>
</div>
</body>
</html>
